<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"
        ><echartsCardVue>
          <template #title> 今日销售额 </template>
          <template #number>
            {{ data.salesToday }}
          </template>
          <template #chart>
            <div style="font-size: 14px; color: yellowgreen">
              日同比:{{ data.salesGrowthLastDay
              }}<svg
                t="1668219196398"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5706"
                width="16"
                height="16"
              >
                <path
                  d="M748.968 664.145c13.659 0 24.772 11.113 24.772 24.773V847.5h-145V688.92c0-13.66 11.113-24.774 24.773-24.774h95.455zM558.176 558.321c14.096 0 25.564 11.47 25.564 25.566V847.5h-145V583.887c0-14.097 11.469-25.566 25.565-25.566h93.87zM367.787 452.5c14.311 0 25.952 11.642 25.952 25.952V847.5H248.74V478.451c0-14.31 11.642-25.952 25.953-25.952h93.094z"
                  fill="#d81e06"
                  p-id="5707"
                ></path>
                <path
                  d="M558.174 558.322c14.097 0 25.565 11.469 25.565 25.565V847.5h-145v-42.825h77.416c16.65 0 30.147-13.498 30.147-30.148V558.322zM367.787 452.499c14.333 0 25.953 11.62 25.953 25.952V847.5h-145v-42.825h77.415c16.65 0 30.148-13.497 30.148-30.148V452.5z m381.18 211.646c13.66 0 24.773 11.113 24.773 24.773v158.58h-145v-42.824h77.416c16.649 0 30.147-13.497 30.147-30.147V664.145z"
                  fill="#d81e06"
                  p-id="5708"
                ></path>
                <path
                  d="M367.787 445c18.446 0 33.453 15.006 33.453 33.452V835.91h29.999V583.887c0-18.05 14.539-32.767 32.52-33.06l0.546-0.004h93.87c18.232 0 33.065 14.833 33.065 33.064l-0.001 252.022h30V688.918c0-17.617 14.19-31.983 31.741-32.269l0.533-0.004h95.454c17.795 0 32.273 14.478 32.273 32.273l-0.001 146.991h53.386c7.517 0 13.684 6.065 13.852 13.544l0.003 0.312v4.896c0 7.62-6.234 13.855-13.855 13.855h-646.77c-7.621 0-13.855-6.234-13.855-13.855v-4.896c0-7.621 6.234-13.855 13.855-13.855h53.385V478.451c0-18.261 14.709-33.152 32.9-33.448l0.553-0.005z m0 15h-93.094c-10.192 0-18.453 8.261-18.453 18.452V835.91h130V478.452c0-10.079-8.081-18.27-18.118-18.45l-0.335-0.003z m190.388 105.823h-93.87c-9.977 0-18.065 8.088-18.065 18.064l-0.001 252.022h130V583.887c0-9.866-7.908-17.885-17.732-18.062l-0.332-0.002z m190.792 105.822h-95.454c-9.54 0-17.273 7.733-17.273 17.273l-0.001 146.991h130V688.918c0-9.432-7.557-17.097-16.948-17.27l-0.324-0.003z"
                  fill="#d81e06"
                  p-id="5709"
                ></path>
                <path
                  d="M733.728 615.25c-6.888 0.115-13.597-3.084-17.948-8.56-4.328-5.445-5.833-12.477-4.129-19.292l12.524-50.093c-82.006-19.698-158.689-47.58-228.004-82.91-57.118-29.113-109.416-63.333-155.438-101.71-79.638-66.408-113.48-122.957-114.882-125.332a41.552 41.552 0 0 1-0.562-0.987c-9.895-17.962-3.805-40.202 13.864-50.631a37.701 37.701 0 0 1 18.478-5.23c13.514-0.235 26.193 6.834 33.088 18.444 0.275 0.454 30.492 49.857 100.743 107.877 41.661 34.406 89.085 65.168 140.957 91.432 63.697 32.25 134.34 57.78 210.04 75.912l14.36-57.441c2.492-9.964 11.09-16.78 21.395-16.958 7.61-0.13 14.454 3.417 18.784 9.734l79.38 115.826a22.397 22.397 0 0 1 3.252 18.084 22.391 22.391 0 0 1-11.379 14.424l-124.55 64.842c-3.155 1.642-6.51 2.505-9.97 2.57h-0.003z"
                  fill="#d81e06"
                  p-id="5710"
                ></path>
                <path
                  d="M880.3 528.044c0.019-4.73-1.597-9.321-4.271-13.224l-8.634-12.597a0.423 0.423 0 0 0-0.544-0.136l-107.665 56.232c-5.5 2.872-11.742-2.29-9.957-8.23l8.698-28.934c2.123-7.062-2.456-14.35-9.73-15.565-293.98-49.151-507.272-274.845-517.442-325.762-0.05-0.244-5.923 8.683-6.105 8.852-12.296 11.387-7.9 22.184 0.639 37.686 0.177 0.323 0.36 0.642 0.562 0.988 1.402 2.375 35.244 58.923 114.882 125.333 46.023 38.376 98.32 72.595 155.439 101.71 69.198 35.27 145.74 63.117 227.59 82.809a0.42 0.42 0 0 1 0.31 0.51l-12.421 49.682c-1.704 6.815-0.2 13.847 4.129 19.292 4.35 5.476 11.06 8.675 17.948 8.56h0.003c3.46-0.063 6.815-0.927 9.97-2.57l124.55-64.841a22.394 22.394 0 0 0 12.049-19.795"
                  fill="#d81e06"
                  p-id="5711"
                ></path>
                <path
                  d="M257.399 157.007a45.223 45.223 0 0 0-22.161 6.27c-10.191 6.015-17.518 15.615-20.63 27.029-3.105 11.389-1.682 23.35 4.008 33.68 0.214 0.387 0.43 0.767 0.653 1.146 1.448 2.454 35.923 60.076 116.557 127.315 46.453 38.735 99.22 73.265 156.836 102.632 67.764 34.538 142.494 62.007 222.303 81.728L704.27 579.58c-2.274 9.097-0.257 18.493 5.534 25.78 5.794 7.29 14.747 11.545 23.95 11.391 4.634-0.084 9.11-1.232 13.307-3.417l124.55-64.842a29.897 29.897 0 0 0 15.19-19.257 29.895 29.895 0 0 0-4.34-24.142L803.08 389.266c-5.694-8.31-15.077-13.165-25.1-12.992-13.745 0.238-25.215 9.335-28.541 22.637l-12.553 50.21c-72.404-17.871-140.034-42.593-201.183-73.553-51.378-26.014-98.336-56.47-139.57-90.524-68.505-56.58-98.432-104.886-99.115-106-8.277-13.875-23.45-22.316-39.62-22.037m0.259 14.997c10.489-0.181 20.774 5.117 26.509 14.775 0.543 0.902 31.007 50.854 102.417 109.83 42.087 34.76 89.98 65.828 142.344 92.34 65.575 33.203 138.422 59.33 216.518 77.662 0.805 0.189 1.59 0.417 2.364 0.666l16.182-64.727c1.789-7.156 7.953-11.17 14.249-11.278 4.656-0.08 9.384 1.974 12.467 6.473l79.38 115.827c5.05 7.368 2.519 17.492-5.403 21.616l-124.55 64.84c-2.194 1.144-4.45 1.683-6.64 1.723-9.168 0.156-17.184-8.485-14.672-18.533l14.376-57.5a31.67 31.67 0 0 1-1.552-0.321c-83.627-19.63-161.743-47.784-232.173-83.682-56.622-28.86-108.448-62.77-154.041-100.788-78.655-65.59-111.851-121.056-113.226-123.385a31.527 31.527 0 0 1-0.452-0.793c-7.845-14.242-2.99-32.233 11.107-40.554a30.067 30.067 0 0 1 14.796-4.191"
                  fill="#d81e06"
                  p-id="5712"
                ></path>
              </svg>
            </div>
            <div style="font-size: 14px; color: yellowgreen">
              月同比:{{ data.salesGrowthLastMonth
              }}<svg
                t="1668219386673"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6453"
                width="16"
                height="16"
              >
                <path
                  d="M799.8 215.2l-0.9-0.8-11.2-52.3c-1.5 0.3-150.3 31.6-229.8 6.8l-16.2 52.2c28.2 8.8 62.2 11.9 96.3 11.9 24.8 0 49.6-1.7 72.1-3.9C471.2 456 195 482.8 192 483l4.7 54.4c13.8-1.1 339.9-31.9 603.1-322.2zM194.5 831.7h173.3V622.4H194.5v209.3zM249.1 677h64v100.1h-64V677zM581.8 831.7V535.5H408.6v296.2h173.2zM463.2 590.2h64v187h-64v-187z"
                  p-id="6454"
                  fill="#13227a"
                ></path>
                <path
                  d="M626.8 831.7h173.3V380.3H626.8v451.4z m54.6-396.8h64v342.2h-64V434.9z"
                  p-id="6455"
                  fill="#13227a"
                ></path>
              </svg>
            </div>
          </template>
          <template #bottom>
            <div>昨日销售额:{{ data.salesLastDay }}</div>
          </template>
        </echartsCardVue></el-col
      >
      <el-col :span="6"
        ><echartsCardVue>
          <template #title> 今日订单 </template>
          <template #number>
            {{ data.orderToday }}
          </template>
          <template #bottom>
            <div>昨日订单量:{{ data.orderLastDay }}</div>
          </template>
          <template #chart>
            <LineCharts :orderTrend="data.orderTrend" v-if="data.orderTrend" />
          </template> </echartsCardVue
      ></el-col>
      <el-col :span="6"
        ><echartsCardVue>
          <template #title> 今日交易用户 </template>
          <template #number>
            {{ data.orderUser }}
          </template>
          <template #bottom>
            <div>退货率:{{ data.returnRate }}</div>
          </template>
          <template #chart>
            <bar-chart :orderUserTrend="data.orderUserTrend" />
          </template> </echartsCardVue
      ></el-col>
      <el-col :span="6"
        ><echartsCardVue>
          <template #title> 累计用户 </template>
          <template #number>
            {{ data.usersTotal }}
          </template>
          <template #bottom>
            <div>
              日同比:{{
                data.userGrowthLastDay
              }}%&nbsp;&nbsp;&nbsp;&nbsp;月同比:{{ data.userGrowthLastMonth }}%
            </div>
          </template>
          <template #chart>
            <progress-chart />
          </template> </echartsCardVue
      ></el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import echartsCardVue from "./components/echartsCard.vue";
import LineCharts from "./lineCharts/index.vue";
import BarChart from "./barCharts/index.vue";
import { onMounted } from "vue";
import ProgressChart from './progressCharts/index.vue'
defineProps(["data"]);
</script>

<style scoped>
.box {
  display: flex;
}
</style>